<template>
  <div>
    <el-upload
      accept=".mp4"
      :action="$api + '/v1/upload/image'"
      list-type="picture-card"
      :before-upload="beforeUpload"
      :on-progress="uploadVideoProcess"
      :on-success="fileSuccess"
      :auto-upload="true"
      :file-list="fileList"
      :limit="fileMaxCount"
      
      name="name"
      :data="{'token': token}"
      
    >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent"></el-progress>
          <video v-if="video && !videoFlag" :src="video" class="el-upload-list__item-thumbnail">您的浏览器不支持视频播放</video>
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :modal="isModal">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'Upload',
    props: {
      fileListArr: { 
        type: Array,
        required: true,
      },
      fileListName: {
        type: String,
        required: true
      },
      fileMaxCount: {
        type: Number,
        required: true
      },
      isModal: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        disabled: false,
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: this.fileListArr,
        token: localStorage.getItem('token'),
        video: '',
        videoFlag: false,
        videoUploadPercent: ''
      }
    },
    computed: {
      // fileToLarge() {
      //   return this.fileList.length >= this.fileMaxCount
      // }
    },
    methods: {
      // 上传图片的格式和大小验证
      beforeUpload(file) {
        const isJPG = file.type === 'video/mp4'
        const isLt10M = file.size / 1024 / 1024 < 10
      
        if (!isJPG) {
          this.$message.warning('上传头像图片只能是 MP4 格式!')
        }
        if (!isLt10M) {
          this.$message.error('上传视频大小不能超过 10MB!')
        }
        return isJPG && isLt10M
      },
      uploadVideoProcess(event, file){
        this.videoFlag = true
        this.videoUploadPercent = Number(file.percentage.toFixed(0))
      },
      // 删除图片的事件
      handleRemove(file) {
        this.fileList = this.fileList.filter((item) => {
          return file.id !== item.id
        })
        this.$emit('fileChange', {
          el: this.fileListName,
          arr: this.fileList
        })
      },
      handlePictureCardPreview() {
        // console.log(file)
        window.open(this.video)
      },
      fileSuccess(r, file) {
        this.videoFlag = false
        this.videoUploadPercent = 0
        this.video = file.response.data.url
        file.id = file.response.data.id
        this.fileList.push({...file})
        this.$emit('fileChange', {
          el: this.fileListName,
          arr: this.fileList
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .hide .el-upload--picture-card {
    display: block !important;
  }
</style>
